import React, { Component } from 'react'

import { connect } from 'dva';
import { Row, Col, ConfigProvider } from 'antd';

import Divider from '@/components/DividerItem';

import Monitor from './Monitor'
import Incidence from './Incidence'
import Face from './Face'
import Position from './Position'
import Fire from './Fire'
import Danger from './Danger'
import AlarmToday from './AlarmToday'

import { Dispatch } from 'typings/redux';

import empty from '@/assets/images/empty.png';

interface P {
  dispatch?: Dispatch;
  owner?: any;
}

@connect(({ home }) => ({
  owner: home.owner || {}
}))
class Home extends Component<P> {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'home/queryOwner' })
  }

  customizeRenderEmpty = () => (
    <Row style={{ height: '100%', flexDirection: 'column' }} type="flex" justify="space-between">
      <Col span={24}><img src={empty} height={'110px'} /></Col>
      <Col span={24}>暂无数据</Col>
    </Row>
  );

  render() {
    const { owner } = this.props;
    const { id, enable, bindStatus } = owner;
    // const bindStatus = 0, enable = 1;
    const value = (+bindStatus) + (+enable);
    const h2 = value === 0 ? '100%' : value === 1 ? 'calc(67% - 10px)' : 'calc(34% - 10px)';
    const H2 = value === 0 ? 'calc(100vh - 125px)' : value === 1 ? 'calc(66vh - 155px)' : 'calc(33vh - 155px)';

    const AlarmTodayC = Divider({ WrapperComponent: () => <AlarmToday />, icon: 'bell', title: '今日警情', type: 'none' })
    const FireC = Divider({ WrapperComponent: () => <Fire />, icon: 'fire', title: '火警趋势', type: 'none' })
    const DangerC = Divider({ WrapperComponent: () => <Danger />, icon: 'warning', title: '隐患趋势', type: 'none' })
    const IncidenceC = Divider({ WrapperComponent: () => <Incidence />, icon: 'rocket', title: '月报警高发部位', type: 'none' })
    const FaceC = Divider({ WrapperComponent: () => (id ? <Face id={id} /> : <></>), icon: 'star', title: '消防评定结果', type: 'none' })
    const PositionC = Divider({ WrapperComponent: () => <Position height={'calc(33vh - 107px)'} />, icon: "environment", title: '安全巡检', type: 'none' })
    const MonitorC = Divider({ WrapperComponent: () => <Monitor height={H2} />, icon: 'robot', title: '实时监控', type: 'none' })

    return (
      <ConfigProvider renderEmpty={this.customizeRenderEmpty}>
        <section style={{ height: '100%', width: '100%' }}>
          <Row gutter={0} style={{ height: '100%' }}>
            <Col span={16} style={{ height: '100%' }}>
              <Row
                type="flex"
                justify="space-between"
                gutter={16}
                style={{ flexDirection: 'column', height: '100%', width: '100%' }}>
                <Col span={24} style={{ height: "calc(24% - 10px)" }}>
                  <AlarmTodayC />
                </Col>
                <Col span={24} style={{ height: "calc(42% - 10px)" }}>
                  <Row
                    type="flex"
                    justify="space-between"
                    style={{ height: "100%", width: '100%' }}>
                    <Col span={12} style={{ height: '100%', width: 'calc(50% - 5px)' }}>
                      <FireC />
                    </Col>
                    <Col span={12} style={{ height: '100%', width: 'calc(50% - 5px)' }}>
                      <DangerC />
                    </Col>
                  </Row>
                </Col>
                <Col span={24} style={{ height: "calc(34% - 10px)", width: '100%' }}><IncidenceC /></Col>
              </Row>

            </Col>
            <Col span={8} style={{ height: '100%' }}>
              <Row
                type="flex"
                justify="space-between"
                gutter={16}
                style={{ flexDirection: 'column', height: '100%' }}>
                {
                  (+bindStatus) ? <Col span={24} style={{ height: "calc(33% - 10px)" }} >
                    <FaceC />
                  </Col> : null
                }
                {
                  (+enable) ? <Col span={24} style={{ height: "calc(33% - 10px)" }}>
                    <PositionC />
                  </Col> : null
                }
                <Col span={24} style={{
                  height: `${h2}`
                }}>
                  <MonitorC />
                </Col>
              </Row>
            </Col>
          </Row>
        </section >
      </ConfigProvider>
    )
  }
}

export default Home;